<template>
	<view>
		<view class="sx">
			<view class="biaoti">单人区日卡</view>
			<view class="neirou">
				<view>可用范围：明区，暗区</view>
				<view class="col">有效期：激活后1小时</view>
			</view>
			<view class="ding" @click="gou()">购买</view>
		</view>
		<view class="sx">
			<view class="biaoti">单人区日卡</view>
			<view class="neirou">
				<view>可用范围：明区，暗区</view>
				<view class="col">有效期：激活后1小时</view>
			</view>
			<view class="ding" @click="gou()">购买</view>
		</view>
		<view class="sx">
			<view class="biaoti">单人区日卡</view>
			<view class="neirou">
				<view>可用范围：明区，暗区</view>
				<view class="col">有效期：激活后1小时</view>
			</view>
			<view class="ding" @click="gou()">购买</view>
		</view>
	</view>
</template>

<script>
import { toRefs, reactive } from 'vue';
export default {
	setup() {
		const data = reactive({
			gou: () => {
				wx.showModal({
				  title: '提示',
				  content:'微信支付',
				  success (res) {
				    if (res.confirm) {
				      console.log('用户点击确定')
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			}
		});
		return { ...toRefs(data) };
	}
};
</script>

<style>
page {
	font-size: 26rpx;
	margin: 0;
	padding: 0;
}
.sx {
	margin: 20rpx;
	width: 700rpx;
	height: 160rpx;
	text-align: center;
	box-shadow: darkgray 5px 5px 5px 0;
}
.biaoti {
	float: left;
	width: 175rpx;
	height: 160rpx;
	line-height: 160rpx;
	background: rgb(133, 133, 254);
	color: rgb(255, 249, 252);
}
.neirou {
	float: left;
	width: 350rpx;
	height: 160rpx;
	line-height: 60rpx;
	padding-top: 20rpx;
	color: rgb(51, 51, 51);
}
.col{
	color: rgb(119,115,115);
}
.ding {
	float: left;
	margin: 20rpx 0 0 0;
	width: 160rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-left: 5rpx solid rgb(128, 128, 255);
	color: rgb(128, 128, 255);
}
</style>
